<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="list">
					<view class="user tn-flex tn-flex-col-center">
						<view class="user-img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="user-right">
							<view class="name">{{item.nickname}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
					</view>
					<view class="comment">评论：{{item.content}}</view>
					<view class="dynamic tn-flex tn-flex-col-center">
						<image v-if="item.goods_image" :src="item.goods_image[0]" mode=""></image>
						<view class="t1 tn-text-ellipsis" v-html="item.goods_content"></view>
					</view>
				</view>
			</block>
			<tn-load-more :status="loadStatus"></tn-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				show: false,
				loadStatus:'nomore'
			};
		},
		onLoad() {
			this.getList(1)
		},
		onReachBottom() {
			this.page++
			this.loadStatus = 'loading'
			this.getList(0)
		},
		methods: {
			async getList(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/user/commentMeList',
						data: {
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = data
						this.show = true
					}else{
						this.list = this.list.concat(data)
						this.loadStatus = 'nomore'
						if(data.length == 0){
							this.page--
						}
					}
				} catch (e) {
					this.msg(e.data.msg)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.list {
			margin-bottom: 40rpx;

			.user {
				.user-img {
					width: 68rpx;
					height: 68rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-right {
					padding-left: 16rpx;

					.name {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}

					.time {
						font-size: 22rpx;
						font-weight: 400;
						color: #333333ad;
					}
				}
			}

			.comment {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 24rpx;
				margin-bottom: 20rpx;
			}

			.dynamic {
				height: 136rpx;
				background: #fff;
				border-radius: 20rpx;
				padding-left: 24rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}

				.t1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
					width: 400rpx;
				}
			}
		}
	}
</style>
